<template>
  <div>
    <svg id="svg"></svg>
  </div>
</template>
<script>
import * as d3 from "d3";
export default {
  data() {
    return {
      myDate: [
        { x: 50, y: 50, index: 1 },
        { x: 100, y: 100, index: 2 },
        { x: 150, y: 150, index: 3 },
        { x: 200, y: 200, index: 4 },
        { x: 250, y: 250, index: 5 },
        { x: 300, y: 300, index: 6 },
        { x: 400, y: 300, index: 7 },
        { x: 500, y: 300, index: 8 },
        { x: 550, y: 300, index: 9 },
        { x: 600, y: 300, index: 10 },
        { x: 650, y: 300, index: 11 },
        { x: 700, y: 300, index: 12 },
      ],
      coordinate: "",
    };
  },
  mounted() {
    this.pathEvent(this.myDate);
    this.handleEvent();
  },
  methods: {
    pathEvent(val) {
      // 画线
      let res = val;
      let arr = [];
      for (let item of res) {
        arr.push(item.x);
        arr.push(item.y);
      }
      let path = d3
        .select("#svg")
        .append("g")
        .attr("id", "path_g")
        .append("path")
        .attr("stroke", "red")
        .attr("stroke-width", "5")
        .attr("fill", "none")
        .attr("d", `M${arr.join(",")}`);
    },
    handleEvent() {
      // let events = this.pathEvent();
      let svgBox = d3.select("#svg");
      let index = 12;
      let indexCircle = null;
      let arr = this.myDate;
      for (let item of this.myDate) {
        svgBox
          .append("circle")
          .attr("r", "10")
          .attr("class", "circle_id")
          .attr("cx", `${item.x}`)
          .attr("cy", `${item.y}`)
          .attr("fill", "red")

        // index = index + 1
      }
      // let a=d3.selectAll(".circle_id")
      // a.on("click",function(_,index2){
      //   console.log(index2)
      // })
      d3.selectAll("circle").data([1,2,3,4,5,6,7,8,9,10,11,12,13])
      d3.selectAll("circle").on("mousedown", function (d, i) {
        console.log(d, i)
        indexCircle=i
      });

      let cx = "";
      const drag = d3
        .drag()
        .on("start", function () {
          d3.select(this).style("fill", "yellow");
          let pt = d3.pointer(event, this);
          cx = pt[0];
        })
        .on("drag", function (a, b) {
          let pt = d3.pointer(event, this); // 这里pointer事件是获取到当前点击元素，并可以得到对应的坐标
          if (pt[1] < 20) {
            console.log("no");
            return;
          } else if (pt[1] > 580) {
            return;
          }
          console.log(pt);
          d3.select(this).attr("cy", pt[1]);
          d3.select("#text1").remove();
          d3.select("#svg")
            .append("text")
            .attr("id", "text1")
            .text(`${pt[1]}`)
            .attr("font-size", "12")
            .attr("fill", "green")
            .attr("x", `${cx}`)
            .attr("y", `${pt[1]}`);
          let obj = {};
          obj.x = d3.select(this).attr("cx");
          obj.y = d3.select(this).attr("cy");
          obj.index = indexCircle;
          arr.splice(indexCircle - 1, 1, obj);
          let sum = [];
          for (let item of arr) {
            sum.push(item.x);
            sum.push(item.y);
          }
          d3.select("path").remove();
          let path = d3
            .select("#path_g")
            .append("path")
            .attr("stroke", "red")
            .attr("stroke-width", "5")
            .attr("fill", "none")
            .attr("d", `M${sum.join(",")}`);
        })
        .on("end", function () {
          d3.select(this).style("fill", "red");
          d3.select("#text1").remove();
        });

      d3.selectAll("circle").call(drag);
    },
  },
};
</script>
<style  scoped>
#svg {
  width: 800px;
  height: 600px;
  box-shadow: 0 0 1px 1px red;
  margin-top: 10px;
  margin-left: 10px;
}
</style>